let path = require('path')
let { CleanWebpackPlugin } = require('clean-webpack-plugin')
let html = require('html-webpack-plugin')
let webpack = require('webpack')
let MiniCssExtractPlugin = require('mini-css-extract-plugin')
// MiniCssExtractPlugin 这个插件可以把css单独拎成一个css文件

// loader 是专门吧其它类型的文件转化成 webpack能认识的类型
// plugins

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'index.[fullhash:6].js',
    path: path.resolve(__dirname, '../mydist'),
    assetModuleFilename: 'img/[name][ext][query]'
  },
  plugins: [
    new CleanWebpackPlugin({
      cleanOnceBeforeBuildPatterns: ['**/*', '!qq.html']
    }),
    new html({
      template: './public/index.html',//  指定用来渲染的html模板
      // filename: 'main.html',// 生成的html文件的名字
      title123: "珠峰",
      qqq: '<link href="https://baidu.com/1.css"/>',
      minify: false
    }),
    new webpack.DefinePlugin({
      VERSION: JSON.stringify('5fa3b9'),
      BROWSER_SUPPORTS_HTML5: true,
      TWO: '1+1',
      'typeof window': JSON.stringify('object'),
    }),
    new MiniCssExtractPlugin({
      filename: 'css/index.css'
    })
  ],
  module: {
    // loader的加载顺序是从右项左  从下往上
    rules: [
      {
        test: /\.css$/,
        // css-loader 是吧js中的css文件翻译成webpack能认识的文件
        // style-loader是把能认识的css文件变成真正起作用的代码
        // use 后边可以 跟 字符串  数组  对象 {loader,options}
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
      {
        test: /\.less$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader', "postcss-loader"],
        exclude: /node_modules/
      },
      {
        test: /\.(svg|png|jpg|gif|mp3)$/,
        // use: 'url-loader'
        // use: {
        //   loader: 'url-loader',
        //   options: {
        //     limit: 20 * 1024,// 若文件大小超过20kb就不再转base64了
        //     name: 'img/[name].[ext]'
        //   }
        // }
        type: 'asset/resource'
      }
      // {
      //   test: /\.css$/,
      //   use: 'style-loader'
      // },
      // {
      //   test: /\.css$/,
      //   use: 'css-loader'
      // }
    ]
  }
}